<template>
  <view :style="{paddingBottom: safeBottom + 'px'}">
    <TnNavbar fixed back-icon="" home-icon="" :center="false">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center justify-between" style="height: 100%;position: relative">
        <image :src="pmAvatar" style="width: 65rpx; height: 65rpx;border-radius: 100%" @click="tn"></image>
        <input
            style="border: 1px solid #eee; height: 65rpx; border-radius: 65rpx;width: calc(100% - 75rpx);padding-left: 50rpx;"
            placeholder="请输入搜索内容"
            confirm-type="search"
            @confirm="() => {
              where.classid = 0
              search()
            }"
            v-model="where.monname"
        >
        <tn-icon name="search" style="position: absolute;left: 110rpx; top: 50%; transform: translateY(-50%)"></tn-icon>
      </view>
    </TnNavbar>
    <scroll-view scroll-x style="white-space: nowrap" class=" padding-sm">
      <view class="flex align-center">
        <view
            @click="changeTab(item)"
            v-for="item in tabsData"
            class="cu-tag bg-blue radius padding" :class="item.id !==  where.classid ? 'light' : ''">
          {{ item.name }}
        </view>
      </view>
    </scroll-view>
    <view class="tn-flex-row tn-flex-wrap" style="position: relative">
      <view
          @click="lookMonsterDetail(item)"
          v-for="item in list"
          style="width: 250rpx;text-align: center;"
          class="tn-mb-sm tn-flex tn-flex-column justify-between"
      >
        <view
            style="
                width: 230rpx;
                height: 383rpx;
                position: relative;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                margin: 0 auto;
                border-radius: 5px;
              "
            :style="{backgroundImage: `url(${item.half_img})`}">
          <view
              class="tn-text-center tn-text-sm tn-flex align-center justify-center"
              style="
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  background-color: rgba(32, 47, 78, .9);
                  padding: 10rpx 0;
                  color:#88b4fe;
                "
          >
            {{ item.def_name }}
          </view>
        </view>
      </view>
    </view>
    <view class="tn-flex-center">
      <TnButton text @click="loadMore" debounce :disabled="showLoading">
        {{ status === 'loadmore' ? '点击加载更多' : status === 'loading' ? '正在加载' : '到底啦~' }}
      </TnButton>
    </view>
    <loading-page :show="showLoading" @click.stop=""/>

    <image
        @tap="showDes = true"
        src="https://seerforwdw.info/seer-image/laidawuyu.png" class="book"
        style="width: 40px;height:40px;position: fixed;z-index:10;bottom: 200rpx;right: 15px"
        mode="heightFix"
    ></image>

    <view class="cu-modal" :class="showDetail?'show':''" @click="showDetail = false">
      <view class="cu-dialog bg-white text-left" @click.stop="" style="background-color: #182f4d;color: #b7cdfe;">
        <view class="cu-bar justify-end">
          <view class="content">{{ current.def_name }}</view>
          <view class="action">
            <TnIcon name="close" color="#b7cdfe" @click="showDetail = false"></TnIcon>
          </view>
        </view>
        <scroll-view scroll-y style="height: 50vh; padding-top: 0;padding-bottom: 0;" class="padding-xl" v-if="current.txt">
          <view style="text-indent: 2em;line-height: 35px" class="text-lg" v-for="item in current.txt.split('\\n')">
            {{ item }}
          </view>
        </scroll-view>
        <view :class="current.same_monster ? 'padding-xl' : 'padding-bottom-xl'">
          <template  v-if="current.same_monster">
            <view>相关精灵:</view>
            <view class="flex align-center margin-top-xs">
              <view
                  style="width: 100rpx;height: 100rpx;margin-right: 10rpx"
                  v-for="item in current.same_monster"
                  @tap="chooseSameMonster(item)"
              >
                <image :src="item.head_img" style="width: 100%;height: 100%"></image>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="showDes?'show':''" @click="showDes = false">
      <view class="cu-dialog bg-white text-left" @click.stop="" style="background-color: #182f4d;color: #b7cdfe;">
        <view class="tn-p-sm flex justify-center">
          <view
              class="padding-tb-sm padding-lr text-center"
              style="color: #96daf3;width: 100px;background-color: #2787d3"
          >
            序言
          </view>
        </view>
        <scroll-view
            v-if="contentList.length > 0"
            scroll-y
            style="height: 50vh; padding-top: 0;" class="padding-xl">
          <view
              style="text-indent: 2em;line-height: 35px"
              class="text-lg"
              v-for="item in contentList[0].content.split('\\n')"
          >
            {{ item }}
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {onLoad, onShareAppMessage} from '@dcloudio/uni-app'
  import {ref, reactive, getCurrentInstance, computed, watch} from 'vue'
  import TnNavbar from "../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import TnIcon from "../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue";
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3";
  import TnButton from "../../uni_modules/tuniaoui-vue3/components/button/src/button.vue";
  import LoadingPage from "../../components/loadingPage.vue";


  onShareAppMessage(() => {
    return {
      title: '莱达物语',
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pagesA/memory-record/memory-record-2'
    }
  })

  const tn = () => {
    uni.navigateBack()
  }

  const {
    proxy
  } = getCurrentInstance()

  const showLoading = ref(false)

  const pmAvatar = __wxConfig.accountInfo.icon

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  // 分类数据
  const tabsData = ref([])
  const getClassList = async () => {
    tabsData.value = await proxy.$api.getArchivesStoryClass({
      story_id: 2
    })
    tabsData.value.splice(0, 0, {
      id: -1,
      name: '最新推荐'
    })
  }

  // 初始数据
  const list = ref([])
  // 分页数据
  const where = reactive({
    page: 1,
    type: 0,
    limit: 18,
    monname: '',
    storyid: 2,
    isrec: 1,
    classid: -1,
    sort: 'id',
    order: 'asc'
  })
  const totalPages = ref(0)

  const getList = async () => {
    showLoading.value = true;
    if (where.page === 1) {
      ({records: list.value, pages: totalPages.value} = await proxy.$api.getArchivesStory(where))
    } else {
      const {records} = await proxy.$api.getArchivesStory(where)
      list.value.push(...records)
    }
    showLoading.value = false
  }

  // 搜索
  const search = async () => {
    where.page = 1
    await getList()
  }

  const status = computed(() => {
    if (showLoading.value) {
      return 'loading'
    } else if (where.page < totalPages.value) {
      return 'loadmore'
    } else {
      return 'nomore'
    }
  })

  // 触底触发
  const loadMore = async () => {
    if (status.value === 'loading') return
    if (status.value === 'loadmore') {
      where.page++
      await getList()
    } else {
      showLoading.value = false
    }
  }

  const changeTab = (item) => {
    if(showLoading.value) return
    where.classid = item.id
    where.monname = ''
    if(item.id < 0) {
      where.isrec = 1
    }else {
      where.isrec = 0
    }
    search()
  }

  // 精灵详情
  const showDetail = ref(false)
  const current = ref({})
  const lookMonsterDetail = (item) => {
    current.value = item
    showDetail.value = true
  }

  // 切换相关精灵
  const chooseSameMonster = async (item) => {
    where.monname = item.def_name
    where.classid = 0
    where.storyid = 0
    await search()
    lookMonsterDetail(list.value[0])
  }

  const storyId = ref(2)

  // 展示传记前言
  const showDes = ref(false)
  // 传记内容
  const contentList = ref([])

  const getConfigList = async () => {
    contentList.value = await proxy.$api.getGlobalConfigList({
      key: ['laidawuyuxuyan']
    })
  }

  onLoad(() => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    getConfigList()
    getClassList()
    getList()
  })

  watch(() => showDetail.value, (newVal) => {
    if(!newVal) {
      where.storyid = storyId.value
      current.value = {}
    }
  })
</script>

<style scoped lang="scss">
  /* 悬浮 */
  .book {
    animation: suspension 1.5s ease-in-out infinite;
  }

  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }
</style>
